<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$model/UI2/system/components/justep/window/window" data-bind="component:{name:'$model/UI2/system/components/justep/window/window'}" __justepbasexid__="__baseID__" components="$model/UI2/system/components/justep/input/input,$model/UI2/system/components/justep/list/list,$model/UI2/system/components/justep/row/row,$model/UI2/system/components/justep/data/data,$model/UI2/system/components/justep/select/select,$model/UI2/system/components/justep/window/window,$model/UI2/system/components/justep/button/button,$model/UI2/system/components/justep/model/model,">  
  <div xmlns="" component="$model/UI2/system/components/justep/model/model" xid="model" style="display:none" data-bind="component:{name:'$model/UI2/system/components/justep/model/model'}"/>  
  <div xmlns="" component="$model/UI2/system/components/justep/row/row" class="x-row" xid="row1" style="height:auto;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
    <div class="x-col" xid="col1"> 
      <div component="$model/UI2/system/components/justep/list/list" class="x-list" xid="list1" data-bind="component:{name:'$model/UI2/system/components/justep/list/list'}" data-config="{&quot;data&quot;:&quot;foodData&quot;}"> 
        <ul class="x-list-template hide" xid="listTemplateUl1" data-bind="foreach:{data:$model.foreach_list1($element),afterRender:$model.foreach_afterRender_list1.bind($model,$element)}"> 
          <li xid="li1" data-bind="css:{'bg-info':$index() %2 == 1 &amp;&amp; val('fID')!=data.val('fID'), 'bg-primary':val('fID')==data.val('fID')}"> 
            <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row3" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
              <div class="x-col" xid="col7"> 
                <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="input5" data-bind="component:{ref:ref('fName'),name:'$model/UI2/system/components/justep/input/input'}"/> 
              </div>  
              <div xid="col8" style="width:80px;" class="x-col x-col-fixed"> 
                <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="input6" data-bind="component:{ref:ref('fPrice'),name:'$model/UI2/system/components/justep/input/input'}"/> 
              </div>  
              <div xid="col14" class="x-col x-col-fixed" style="width:100px;"> 
                <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="input13" data-bind="component:{ref:ref('calcPriceText'),name:'$model/UI2/system/components/justep/input/input'}"/> 
              </div>  
              <div xid="col5" class="x-col x-col-fixed" style="width:80px;"> 
                <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="input1" data-bind="component:{ref:ref('fStatus'),name:'$model/UI2/system/components/justep/input/input'}"/> 
              </div>  
              <div xid="col25" class="x-col x-col-fixed" style="width:80px;"> 
                <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="input3" data-bind="component:{ref:ref('calcStatusText'),name:'$model/UI2/system/components/justep/input/input'}"/> 
              </div>  
              <div class="x-col x-col-fixed" xid="col19" style="width:auto;"> 
                <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link btn-sm btn-only-icon " xid="deleteBtn" style="width:30px;" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:deleteBtnClick" data-config="{&quot;icon&quot;:&quot;icon-android-remove&quot;,&quot;label&quot;:&quot;button&quot;}"> 
                  <i xid="i1" class="icon-android-remove text-danger"/>  
                  <span xid="span4"/> 
                </a> 
              </div> 
            </div> 
          </li> 
        </ul> 
      </div>  
      <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row9" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
        <div class="x-col" xid="col20"> 
          <span xid="span9">菜品总数：</span> 
        </div>  
        <div class="x-col" xid="col21"> 
          <label xid="label3" data-bind="text:tempData.ref('foodCount')">label</label> 
        </div>  
        <div class="x-col" xid="col22"> 
          <span xid="span11">启用菜品数：</span> 
        </div>  
        <div class="x-col" xid="col26"> 
          <label xid="label2" data-bind="text:tempData.ref('enabledFoodCount')">label</label> 
        </div>  
        <div class="x-col x-col-fixed" xid="col28" style="width:65px;"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="editBtn" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},text:tempData.val('foodDataReadonly') ? '编辑' : '只读'" data-events="onClick:editBtnClick" data-config="{&quot;label&quot;:&quot;编辑&quot;}"> 
            <i xid="i2"/>  
            <span xid="span12">编辑</span> 
          </a> 
        </div> 
      </div> 
    </div>  
    <div class="x-col" xid="col2"> 
      <div class="panel panel-default" style="height:auto;" xid="div3"> 
        <div class="panel-heading" style="padding: 5px;" xid="div4" data-bind="event:{click:$model._callModelFn.bind($model, 'panelTopClick')}"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row22" style="padding: 0px;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div class="x-col" xid="col43"> 
              <h4 xid="h44">bind-ref、bind-labelRef</h4> 
            </div>  
            <div xid="col44"> 
              <label xid="label15">点击标题显示或隐藏</label> 
            </div> 
          </div> 
        </div>  
        <div class="panel-body" style="padding: 0px;height:auto;" xid="div5"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row24" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col48" style="width:120px;"> 
              <span xid="span23">绑定数值字段</span> 
            </div>  
            <div class="x-col" xid="col47"> 
              <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="input12" data-bind="component:{ref:foodData.ref('fPrice'),name:'$model/UI2/system/components/justep/input/input'}"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row25" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col49" style="width:120px;"> 
              <span xid="span24">绑定日期字段</span> 
            </div>  
            <div class="x-col" xid="col50"> 
              <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="input16" data-bind="component:{ref:foodData.ref('fDate'),name:'$model/UI2/system/components/justep/input/input'}"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row11" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col24" style="width:120px;"> 
              <span xid="span1">bind-labelRef</span> 
            </div>  
            <div class="x-col" xid="col23"> 
              <select component="$model/UI2/system/components/justep/select/select" class="form-control" xid="select1" data-bind="component:{ref:foodData.ref('fStatus'),labelRef:foodData.ref('calcStatusText'),name:'$model/UI2/system/components/justep/select/select'},options:statusData.datas,optionsValue:'code',optionsText:'name',optionsAfterRender:$model.__justep__.selectOptionsAfterRender.bind($model,$element)"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row26" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col51" style="width:120px;"> 
              <span xid="span25">计算规则感知</span> 
            </div>  
            <div class="x-col" xid="col52"> 
              <input component="$model/UI2/system/components/justep/input/input" class="form-control" xid="input17" data-bind="component:{ref:foodData.ref('calcPriceText'),name:'$model/UI2/system/components/justep/input/input'}"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row27" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col56"> 
              <span xid="span29">只读规则感知：数值大于30则日期只读</span> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row" xid="row29" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col55"> 
              <span xid="span27">约束规则感知：日期不能大于2020年</span> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row" xid="row28" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col54"> 
              <span xid="span28">必填规则感知：价格不能为空</span> 
            </div> 
          </div> 
        </div> 
      </div>  
      <div class="panel panel-default" style="height:auto;" xid="div8"> 
        <div class="panel-heading" style="padding: 5px;" xid="div7" data-bind="event:{click:$model._callModelFn.bind($model, 'panelTopClick')}"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row15" style="padding: 0px;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div class="x-col" xid="col29"> 
              <h4 xid="h43">bind-value、bind-checked、bind-text</h4> 
            </div>  
            <div xid="col27"> 
              <label xid="label1">点击标题显示或隐藏</label> 
            </div> 
          </div> 
        </div>  
        <div class="panel-body" style="padding: 0px;height:auto;" xid="div6"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row2" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col3" style="width:120px;"> 
              <span xid="span5">bind-value（ref）</span> 
            </div>  
            <div class="x-col" xid="col4"> 
              <input type="text" value="" xid="input10" style="width:100%;" data-bind="value:foodData.ref('fPrice')"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row4" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col9" style="width:120px;"> 
              <span xid="span6">bind-value（val）</span> 
            </div>  
            <div class="x-col" xid="col6"> 
              <input type="text" value="" xid="input11" style="width:100%;" data-bind="value:foodData.val('fPrice')"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row5" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col11" style="width:120px;"> 
              <span xid="span7">bind-text</span> 
            </div>  
            <div class="x-col" xid="col10"> 
              <span xid="span8" data-bind="text:foodData.ref('fPrice')"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row6" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col13" style="width:120px;"> 
              <span xid="span10">bind-checked</span> 
            </div>  
            <div class="x-col" xid="col12"> 
              <input type="radio" value="1" name="price" xid="radio1"/>  
              <label xid="label10" for="__baseID___radio1">启用</label>  
              <input type="radio" value="0" name="price" xid="radio2"/>  
              <label xid="label11" for="__baseID___radio2">禁用</label> 
            </div> 
          </div> 
        </div> 
      </div>  
      <div class="panel panel-default" style="height:auto;" xid="div1"> 
        <div class="panel-heading" style="padding: 5px;" xid="div9" data-bind="event:{click:$model._callModelFn.bind($model, 'panelTopClick')}"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row17" style="padding: 0px;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div class="x-col" xid="col32"> 
              <h4 xid="h41">bind-visible、bind-hasFocus、bind-enabled、bind-disabled</h4> 
            </div>  
            <div xid="col31"> 
              <label xid="label4">点击标题显示或隐藏</label> 
            </div> 
          </div> 
        </div>  
        <div class="panel-body" style="padding: 0px;height:auto;" xid="div10"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row19" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col41" style="width:150px;"> 
              <span xid="span19">bind-visible（&gt;30）</span> 
            </div>  
            <div class="x-col" xid="col45"> 
              <input type="text" value="" xid="input8" style="width:100%;" data-bind="value:foodData.ref('fPrice'),visible:foodData.val('fPrice') &gt; 30"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row20" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col40" style="width:150px;"> 
              <span xid="span21">bind-hasFocus（&gt;50）</span> 
            </div>  
            <div class="x-col" xid="col42"> 
              <input type="text" value="" xid="input9" style="width:100%;" data-bind="value:foodData.val('fPrice'),hasFocus:foodData.val('fPrice') &gt; 50"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row18" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col38" style="width:150px;"> 
              <span xid="span20">bind-enabled（状态）</span> 
            </div>  
            <div class="x-col" xid="col39"> 
              <input type="text" value="" xid="input14" style="width:100%;" data-bind="value:foodData.val('fPrice'),enable:foodData.val('fStatus') == 1"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row23" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col58" style="width:150px;"> 
              <span xid="span22">bind-disabled（状态）</span> 
            </div>  
            <div class="x-col" xid="col57"> 
              <input type="text" value="" xid="input15" style="width:100%;" data-bind="value:foodData.val('fPrice'),disable:foodData.val('fStatus') != 1"/> 
            </div> 
          </div> 
        </div> 
      </div>  
      <div class="panel panel-default" style="height:auto;" xid="div12"> 
        <div class="panel-heading" style="padding: 5px;" xid="div11" data-bind="event:{click:$model._callModelFn.bind($model, 'panelTopClick')}"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row31" style="padding: 0px;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div class="x-col" xid="col64"> 
              <h4 xid="h42">bind-style、bind-css</h4> 
            </div>  
            <div xid="col63"> 
              <label xid="label7">点击标题显示或隐藏</label> 
            </div> 
          </div> 
        </div>  
        <div class="panel-body" style="padding: 0px;height:auto;" xid="div13"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row33" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col70" style="width:150px;"> 
              <span xid="span30">bind-style（&gt;30）</span> 
            </div>  
            <div class="x-col" xid="col67"> 
              <input type="text" value="" xid="input22" style="width:100%;" data-bind="value:foodData.ref('fPrice'),style:{'backgroundColor': foodData.val('fPrice') &gt; 30 ? 'red' : null, 'color' : foodData.val('fPrice') &gt; 30 ? 'yellow' : null}"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row34" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col69" style="width:150px;"> 
              <span xid="span33">bind-css（&gt;30）</span> 
            </div>  
            <div class="x-col" xid="col68"> 
              <input type="text" value="" xid="input21" style="width:100%;" data-bind="value:foodData.val('fPrice'),css:{'text-danger': foodData.val('fPrice') &gt; 30}"/> 
            </div> 
          </div> 
        </div> 
      </div>  
      <div class="panel panel-default" style="height:auto;" xid="div15"> 
        <div class="panel-heading" style="padding: 5px;" xid="div16" data-bind="event:{click:$model._callModelFn.bind($model, 'panelTopClick')}"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row38" style="padding: 0px;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div class="x-col" xid="col72"> 
              <h4 xid="h45">bind-attr-xxx</h4> 
            </div>  
            <div xid="col71"> 
              <label xid="label8">点击标题显示或隐藏</label> 
            </div> 
          </div> 
        </div>  
        <div class="panel-body" style="padding: 0px;height:auto;" xid="div14"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row37" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col76" style="width:150px;"> 
              <span xid="span35">bind-attr-src</span> 
            </div>  
            <div class="x-col" xid="col75"> 
              <img src="about:blank" alt="" xid="image1" height="80px" style="width:120px;" data-bind="attr:{src:toUrl('./img/' + foodData.val('fImage'))}"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row36" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col74" style="width:150px;"> 
              <span xid="span34">bind-attr-xxx</span> 
            </div>  
            <div class="x-col" xid="col73"> 
              <input type="text" value="" xid="input23" style="width:100%;" data-bind="value:foodData.val('fPrice'),attr:{xxx:foodData.val('fName')}"/> 
            </div> 
          </div> 
        </div> 
      </div>  
      <div class="panel panel-default" style="height:auto;" xid="div18"> 
        <div class="panel-heading" style="padding: 5px;" xid="div17" data-bind="event:{click:$model._callModelFn.bind($model, 'panelTopClick')}"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row39" style="padding: 0px;" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div class="x-col" xid="col77"> 
              <h4 xid="h46">bind-if、bind-ifnot、bind-with、bind-foreach</h4> 
            </div>  
            <div xid="col78"> 
              <label xid="label9">点击标题显示或隐藏</label> 
            </div> 
          </div> 
        </div>  
        <div class="panel-body" style="padding: 0px;height:auto;" xid="div19"> 
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row41" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col81" style="width:150px;"> 
              <span xid="span37">bind-if（&gt;30）</span> 
            </div>  
            <div class="x-col" xid="col82" data-bind="if:foodData.val('fPrice') &gt; 30"> 
              <input type="text" value="" xid="input25" style="width:100%;" data-bind="value:foodData.val('fPrice')"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row7" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col15" style="width:150px;"> 
              <span xid="span2">bind-with（foodData）</span> 
            </div>  
            <div class="x-col" xid="col16" data-bind="with:foodData"> 
              <input type="text" value="" xid="input2" style="width:100%;" data-bind="value:xid+ '的数量：' + getCount()"/> 
            </div> 
          </div>  
          <div component="$model/UI2/system/components/justep/row/row" class="x-row x-row-center" xid="row8" data-bind="component:{name:'$model/UI2/system/components/justep/row/row'}"> 
            <div xid="col18" style="width:150px;"> 
              <span xid="span3">bind-foreach</span> 
            </div>  
            <div class="x-col" xid="col17" data-bind="foreach:foodData.datas"> 
              <input type="text" value="" xid="input4" style="width:100%;" data-bind="value:$index() + val('fName')"/> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>
